import React, { Component } from 'react';
import { Dialog } from 'ming-ui';
import { Checkbox, DatePicker } from 'antd';
import DatePickerFilter from 'src/pages/Admin/common/datePickerFilter';
import Trigger from 'rc-trigger';
import 'rc-trigger/assets/index.css';
import moment from 'moment';
import { addToken } from 'src/util';

const plainOptions = [
  {
    label: _l('用户列表'),
    value: 'userList'
  },
  {
    label: _l('群组列表'),
    value: 'groupList'
  },
  {
    label: _l('任务列表'),
    value: 'task'
  }];

export default class ExportDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      datePickerVisible: false,
      startDate: moment(new Date()).format('YYYY-MM-DD'),
      endDate: moment(new Date()).format('YYYY-MM-DD'),
      typeList: []
    };
  }

  onChange(value) {
    this.setState({
      typeList: value
    })
  }

  exportList() {
    const { typeList, startDate } = this.state
    if(!typeList.length) {
      alert(_l('请选择要导出的列表'), 3);
    } else if(!startDate) {
      alert(_l('请选择时间段'), 3);
    } else {
      $("#__VIEWSTATE").remove();
      if (window.navigator && window.navigator.userAgent.indexOf('MDClient') < 0) {
        $("#outPutFormBox").attr("target", "_blank");
      }
      $("#outPutFormBox").submit();
    }
  }

  render() {
    const { datePickerVisible, startDate, endDate, typeList } = this.state;
    let outPutList = ''
    typeList.forEach(item => {
      outPutList += item + "|";
    })
    return (
      <Dialog
        visible={this.props.visible}
        title={<span className="Bold">{_l('导出数据')}</span>}
        cancelText={_l('取消')}
        okText={_l('导出')}
        width="480"
        overlayClosable={false}
        onCancel={() => {
          this.props.handleChangeVisible('exportVisible', false);
        }}
        onOk={() => this.exportList()}>
        <div className="exportBox">
          <div className="bold mTop8 mBottom8">{_l('导出的类别')}</div>
          <Checkbox.Group options={plainOptions} onChange={(e) => this.onChange(e)} />
          <div className="exportLine"></div>
          <div className="bold">{_l('导出的时间范围')}</div>
          <Trigger
            popupVisible={datePickerVisible}
            onPopupVisibleChange={visible => this.setState({ datePickerVisible: visible })}
            action={['click']}
            popupAlign={{ points: ['tl', 'bl'] }}
            popup={
              <DatePickerFilter
                updateData={data => {
                  this.setState({
                    datePickerVisible: false,
                    startDate: data.startDate,
                    endDate: data.endDate,
                  });
                }}
              />
            }>
            <div className="exportData mBottom8">{startDate&&endDate ? _l('%0 至 %1', startDate, endDate) : ''}</div>
          </Trigger>
          <form id='outPutFormBox' method="get" action={addToken(`${md.global.Config.AjaxApiUrl}download/exportProjectEntityToExcel`)}>
            <input type="hidden" name="list" value={outPutList} />
            <input type="hidden" name="startDate" value={startDate} />
            <input type="hidden" name="endDate" value={endDate} />
            <input type="hidden" name="projectId" value={this.props.projectId} />
          </form>
        </div>
      </Dialog>
    );
  }
}
